<template>
  <div class="workbench">
    <div class="top flexBetween">
      <div class="flexAround top_content">
        <div class="top_left">
          <img src="@/assets/img/managePeople.png" alt />
        </div>
        <div class="top_right">
          <div>管理人员</div>
          <div>{{this.topInfo.managerTotal}}</div>
        </div>
      </div>
      <div class="flexAround top_content">
        <div class="top_left">
          <img src="@/assets/img/laborPeople.png" alt />
        </div>
        <div class="top_right">
          <div>劳务人员</div>
          <div>{{this.topInfo.labourTotal}}</div>
        </div>
      </div>
      <div class="flexAround top_content">
        <div class="top_left">
          <img src="@/assets/img/dayAttendence.png" alt />
        </div>
        <div class="top_right">
          <div>今日劳务人员出勤</div>
          <div>{{this.topInfo.attendanceTotal}}</div>
        </div>
      </div>
      <div class="flexAround top_content">
        <div class="top_left">
          <img src="@/assets/img/totalPay.png" alt />
        </div>
        <div class="top_right">
          <div>工资累计支付</div>
          <div>{{format_number(this.topInfo.wagePayTotal)}}</div>
        </div>
      </div>
    </div>

    <div class="center flexBetween">
      <div class="center_left">
        <div class="center_title flexBetweenCenter">
          <div class="flexStartCenter">
            <div style="font-size:16px;margin:0 10px;color:#000;">班组工资表上报情况</div>
            <div style="color:#1980ff;background:#E6F7FF;padding:1px 10px;">
              {{moment(new Date())
              .subtract(1, 'months')
              .format('YYYY-MM')}}
            </div>
          </div>

          <div
            style="color:#1980ff;cursor:pointer"
            @click="onDetail()"
            v-if="this.pendingInfo.status != '未开始'"
          >查看详情</div>
          <div style="color:#1980ff;cursor:pointer" @click="onAdd()" v-else>现在新建</div>
        </div>
        <div class="acard">
          <a-card>
            <p class="flexStart2">
              <a-card-grid
                style="width:33.333%;text-align:left;padding:10px 24px;"
                v-for="(item,index) in teamGroup"
                :key="index"
                :bordered="false"
              >
                <div>
                  <div
                    style="color:#000;font-size:15px;margin-bottom:0px;padding:5px 0"
                  >{{item.groupName}}</div>
                  <div style="margin-bottom:10px;white-space: normal;">{{item.laborName}}</div>
                  <div class="flexBetween">
                    <div
                      class="notreported"
                      :class="{reported:item.reported=='已上报'}"
                    >{{item.reported}}</div>
                    <div v-if="item.reported=='已上报'">{{item.time }}</div>
                  </div>
                </div>
              </a-card-grid>
            </p>
          </a-card>
        </div>
      </div>
      <div class="center_right">
        <div class="center_title" style="font-size:16px;border-bottom:1px solid #e8e8e8">待办事项</div>
        <div class="right_content">
          <div
            class="flexBetweenCenter"
            style="border-bottom:1px solid #e8e8e8;padding-bottom:25px;margin-bottom:25px"
          >
            <div class="payState">
              <div>
                {{moment(new Date())
                .subtract(1, 'months')
                .format('YYYY-MM')}}
              </div>
              <div>工资支付状态</div>
            </div>
            <div
              :class="this.pendingInfo.status == '未开始'? 'statusRed': this.pendingInfo.status == '已完成'? 'statusGreen' : 'status'"
            >{{this.pendingInfo.status}}</div>
            <div
              class="blue"
              style="margin-right:30px;cursor:pointer"
              @click="onDetail()"
              v-if="this.pendingInfo.status != '未开始'"
            >查看详情</div>
            <div class="blue" style="margin-right:30px;cursor:pointer" @click="onAdd()" v-else>现在新建</div>
          </div>
          <div class="flexBetween">
            <div class="register">
              <div>合同未登记</div>
              <div
                style="font-size:22px;color:#1890ff;cursor:pointer"
                @click="contactPush"
              >{{this.pendingInfo.contractUnregisteredTotal}}</div>
            </div>
            <div class="register">
              <div>银行卡未登记</div>
              <div
                style="font-size:22px;color:#1890ff;cursor:pointer"
                @click="bankPush"
              >{{this.pendingInfo.wageCardUnregisteredTotal}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="echarts">
      <div class="echartsTitle" style="margin-bottom:30px">项目统计</div>
      <div style="margin-bottom:60px">
        <div class="echarts_1_title" style="margin-bottom:30px">人员进出场</div>
        <div class="echarts_1">
          <Echart :echartObj="echartObj" />
        </div>
      </div>
      <!-- <div style="margin-bottom:60px">
        <div class="flexBetween" style="margin-bottom:20px">
          <div class="echarts_1_title" style="margin-bottom:30px">近10天出勤情况</div>
          <div class="flexBetweenCenter" style="width:35%;padding-right:30px">
            <div class="echarts_1_title">班组出勤排名</div>
            <div>
              <a-radio-group v-model="value" @change="onChange">
                <a-radio-button value="a">今日</a-radio-button>
                <a-radio-button value="b">本月</a-radio-button>
                <a-radio-button value="c">上一月</a-radio-button>
              </a-radio-group>
            </div>
          </div>
        </div>

        <div class="flexBetween">
          <div class="echarts_2">
            <Echart :echartObj="echartObj2" />
          </div>
          <div class="echart2-right">
            <div
              v-for="(item,index) in attendance"
              :key="index"
              class="flexBetweenCenter"
              style="color:#999;padding:10px 0"
            >
              <div class="flexStartCenter">
                <div
                  class="ranking"
                  :class="{rankTop:item.ranking<=3}"
                  style="margin-right:30px"
                >{{item.ranking}}</div>
                <div class="name">{{item.name}}</div>
              </div>

              <div class="proportion" style="margin-right:40px">{{item.proportion}}</div>
            </div>
          </div>
        </div>
      </div>-->

      <div style="padding-bottom:60px">
        <div class="echarts_1_title" style="margin-bottom:30px">2021年工资支付统计（单位：万元）</div>
        <div class="echarts_1">
          <Echart :echartObj="echartObj3" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { queryWagePay, getWageStatistics, queryPending, queryWageChart } from '@/api/workBench'
import { getInOut } from '@/api/person.js'
import { mapGetters, mapActions } from 'vuex'
import { wageQuery } from '@/api/wageSheet'
import moment from 'moment'
import Echart from '@/components/echarts/index.vue'
let monthData = []
for (var i = 0; i < 12; i++) {
  monthData.push(i + 1 + '月')
}
const monthDay = []
for (let i = 9; i >= 0; i--) {
  if (i == 0) {
    monthDay.push('今天')
  } else if (i == 1) {
    monthDay.push('昨天')
  } else {
    monthDay.push(
      moment()
        .subtract('days', i)
        .format('MM-DD')
    )
  }
}
const option = {
  color: ['#76C585', '#59B0E7', '#C4C4C4'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['进场人数', '离场人数', '在场人数']
  },
  grid: {
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: monthData
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '进场人数',
      type: 'bar',
      stack: 'one',
      barWidth: 20,
      label: {
        normal: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#76C585'
          }
        }
      },
      data: [3, 34, 38, 0]
    },
    {
      name: '离场人数',
      type: 'bar',
      stack: 'one',
      barWidth: 20,
      label: {
        normal: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#59B0E7'
          }
        }
      },
      data: [0, 218, 206, 26]
    },

    {
      name: '在场人数',
      type: 'line',
      label: {
        normal: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#c4c4c4'
          }
        }
      },
      data: [0, 170, 338, 364]
    }
  ]
}
const option2 = {
  // color: ['#59B0E7', '#C4C4C4'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['当期支付', '累计支付']
  },
  grid: {
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: monthData
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: false
      },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#f0f0f0'],
          width: 1,
          type: 'solid'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '当期支付',
      type: 'bar',
      stack: 'one',
      barWidth: 20,
      data: [1, 2, 3, 4, 5, 6, 7],
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: '#1268f3' // 0% 处的颜色
              },
              {
                offset: 0.6,
                color: '#08a4fa' // 60% 处的颜色
              },
              {
                offset: 1,
                color: '#01ccfe' // 100% 处的颜色
              }
            ],
            false
          )
        }
      }
    },

    {
      name: '累计支付',
      type: 'line',
      smooth: true,
      data: [1, 5, 3, 4, 2, 1, 4],
      itemStyle: {
        normal: {
          color: '#01ccfe'
        }
      }
    }
  ]
}
import { getTickerLogin } from '@/api/user'
// #1999ED   #68CCFF
export default {
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      teamGroup: [],
      topInfo: '',
      value: 'a',
      echartObj: {},
      echartObj2: option2,
      echartObj3: {},
      attendance: [
        {
          ranking: 1,
          name: '土方作业队',
          proportion: '84.3%'
        },
        {
          ranking: 2,
          name: '混凝土拌合站',
          proportion: '83.2%'
        },
        {
          ranking: 3,
          name: '地连墙作业队',
          proportion: '79.2%'
        },
        {
          ranking: 4,
          name: '殷家沟作业队',
          proportion: '75.4%'
        },
        {
          ranking: 5,
          name: '临建作业队',
          proportion: '64.3%'
        },
        {
          ranking: 6,
          name: '北锚碇作业二队',
          proportion: '55.4%'
        },
        {
          ranking: 7,
          name: '北锚碇作业一队',
          proportion: '51.9%'
        },
        {
          ranking: 8,
          name: '钢结构作业队',
          proportion: '50%'
        }
      ],
      detailId: '',
      pendingInfo: '',
      wageTotal: [],
      currentWage: []
    }
  },
  components: {
    Echart
  },
  created() {
    this.getPersonInOutData()
  },
  mounted() {
    // this.getTickerLogin()
    //  console.log(moment(new Date()).format('YYYY-MM'));
    this.queryWagePay()
    this.getWageStatistics()
    this.getPending()
    this.getWageChart()
    // console.log(this.userInfo);
    // this.configFun.times()
    // console.log(moment().subtract('days', 2));
  },
  methods: {
    // ...mapActions(['getTicker']),

    // async getTickerLogin() {
    //   const result = await this.getTicker({ ticket: 'ST-158-WBojMEXNyuGxpbo7vGr7-login.zhinengjianshe.com' })
    //   console.log(result)

    //   if (typeof result == 'object') {
    //     let data = result.data
    //     console.log(111);
        
    //   }else{
    //     console.log(222);
        
    //   }
    //   console.log(data)
    // },
    onDetail() {
      this.getData()
      //
    },
    onAdd() {
      this.$router.push({ path: '/migrantWages/wagePaymentRecord' })
    },
    getData() {
      let data = {
        orgId: this.userInfo.orgId,
        page: 1,
        size: 10
      }
      this.data = []

      // wageQuery(data).then((res) => {
      //   if (res.data.data.wageSheetVOList.length > 0) {
      //     this.detailId = res.data.data.wageSheetVOList[0].id
      //     // console.log(res.data.data.wageSheetVOList);
      sessionStorage.setItem('sheedId', this.teamGroup[0].sheetId)
      this.$router.push({ path: '/migrantWages/unitAccount' })
      //   }
      // })
    },
    getPersonInOutData() {
      getInOut({ orgId: this.userInfo.orgId }).then((res) => {
        let result = res.data.data
        let inData = []
        let leaveData = []
        let enterData = []
        let min = 0
        let max = 0
        result.forEach((item, index) => {
          if (item.inNum > max) {
            max = item.inNum
          }
          inData.push(item.inNum)
          if (item.leaveNum * -1 < min) {
            min = item.leaveNum * -1
          }
          leaveData.push(item.leaveNum * -1)
          enterData.push(item.enterNum)
        })

        max = parseInt(max / 50) * 50
        max = max + 50
        // min = min - 50

        // console.log(enterData);

        if (parseInt(min / 50) == 0) {
          min = -50
        } else {
          min = parseInt(min / 50) * 50
        }
        min = min - 50
        // this.echartObj.series[0].data = inData
        // this.echartObj.series[1].data = leaveData
        // this.echartObj.series[2].data = enterData

        this.echartObj = {
          color: ['#76C585', '#dd7e6b', '#01ccfe'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['进场人数', '离场人数', '在场人数']
          },
          grid: {
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: monthData,
              axisLabel: { margin: 25 }
            }
          ],
          yAxis: [
            // {
            //   type: 'value',

            // }
            {
              type: 'value',
              axisLine: {
                show: false
              },
              min: min,
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#f0f0f0'],
                  width: 1,
                  type: 'solid'
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '进场人数',
              type: 'bar',
              // stack: 'one',
              // barWidth: 20,
              barGap: '-100%',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#76C585'
                  }
                }
              },
              data: inData
            },
            {
              name: '离场人数',
              type: 'bar',
              // stack: 'one',
              // barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: 'bottom',
                  textStyle: {
                    color: '#dd7e6b'
                  }
                }
              },
              data: leaveData
            },

            {
              name: '在场人数',
              type: 'line',

              label: {
                normal: {
                  show: true,
                  position: [20, -20],
                  textStyle: {
                    color: '#01ccfe'
                  }
                }
              },
              data: enterData
            }
          ]
        }
      })
    },
    moment,

    queryWagePay() {
      let data = {
        wageMonth: moment(new Date())
          .subtract(1, 'months')
          .format('YYYY-MM')
      }
      // console.log(moment(new Date(),'YYYY-MM'));

      queryWagePay(data).then((res) => {
        let data = res.data.data
        // console.log(data)
        data.forEach((data) => {
          data.groupName = data.teamName
          data.laborName = data.laborOrgName
          if (data.reportStatus == 0) {
            data.reported = '未上报'
          } else data.reported = '已上报'

          data.time = data.reportTime
        })
        this.teamGroup = data
      })
    },
    getWageStatistics() {
      let data = { wageMonth: moment(new Date()).format('YYYY-MM') }
      getWageStatistics(data).then((res) => {
        let data = res.data.data
        // console.log(data);
        this.topInfo = data
      })
    },
    onChange(e) {
      console.log(`checked = ${e.target.value}`)
    },
    format_number(n) {
      // console.log(n);
      if (n) {
        n =n
      }else{
        n=0
      }

      // if(!null){
      //   console.log(false);
        
      // }else{
      //   console.log(true);
        
      // }
      var b = parseInt(n).toString()
      var len = b.length
      if (len <= 3) {
        return b
      }
      var r = len % 3
      return r > 0
        ? b.slice(0, r) +
            ',' +
            b
              .slice(r, len)
              .match(/\d{3}/g)
              .join(',')
        : b
            .slice(r, len)
            .match(/\d{3}/g)
            .join(',')
    },
    getPending() {
      let data = {
        wageMonth: moment(new Date())
          .subtract(1, 'months')
          .format('YYYY-MM')
      }
      queryPending(data).then((res) => {
        this.pendingInfo = res.data.data
        // console.log(res.data.data)
      })
    },
    getWageChart() {
      let data = {
        year: moment(new Date()).format('YYYY'),
        orgId: this.userInfo.orgId
      }
      queryWageChart(data).then((res) => {
        let currentWage = []
        let wageTotal = []
        let month = new Date().getMonth()
        // console.log(month);

        res.data.data.forEach((item, index) => {
          if (index <= month) {
            currentWage.push((item.currentWage / 10000).toFixed(4))
            wageTotal.push((item.wageTotal / 10000).toFixed(4))
          }
        })
        this.echartObj3 = {
          // color: ['#59B0E7', '#C4C4C4'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['当期支付', '累计支付']
          },
          grid: {
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: monthData
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: false
              },
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#f0f0f0'],
                  width: 1,
                  type: 'solid'
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '当期支付',
              type: 'bar',
              stack: 'one',
              // barWidth: 20,
              data: currentWage,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: '#1268f3' // 0% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: '#08a4fa' // 60% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#01ccfe' // 100% 处的颜色
                      }
                    ],
                    false
                  )
                }
              }
            },

            {
              name: '累计支付',
              type: 'line',
              smooth: true,
              data: wageTotal,
              itemStyle: {
                normal: {
                  color: '#01ccfe'
                }
              }
            }
          ]
        }
        // this.currentWage = currentWage
        // this.wageTotal = wageTotal
      })
    },
    contactPush() {
      // console.log(111);

      this.$router.push({ path: '/workbench/contractList' })
    },
    bankPush() {
      this.$router.push({ path: '/workbench/bankCardList' })
    }
  }
}
</script>

<style scoped>
.workbench {
  width: 100%;
}
.top_content {
  background: #fff;
  width: 24%;
  padding: 18px;
  color: #999;
}
.top_right div {
  width: 120px;
  text-align: center;
}
.top_right div:nth-of-type(2) {
  font-size: 25px;
  color: black;
}
.top,
.center {
  margin-bottom: 20px;
  width: 100%;
}
.center_title,
.echartsTitle {
  padding: 15px 20px;
}

.center_left {
  width: calc(70% - 20px);
  margin-right: 20px;
  background: #fff;
}
.center_right {
  width: 30%;
  background: #fff;
}
.right_content {
  padding: 25px;
}
.payState,
.register {
  color: #999;
  margin-left: 20px;
  text-align: center;
}
.register {
  width: calc(50% - 1px);
  padding: 0px 0;
  text-align: center;
}
.flexBetween .register:nth-of-type(1) {
  border-right: 1px solid #e8e8e8;
}
.blue {
  color: #1890ff;
}
.acard {
  height: 209px;
  overflow-y: auto;
}
.acard::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /**/
}
.acard::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
.acard::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.notreported {
  color: red;
}
.reported {
  color: #1890ff;
}
::v-deep .ant-card-bordered {
  border: none;
  border-top: 1px solid #e8e8e8;
}
/* ::v-deep .ant-card-grid {
  box-shadow: 0px 0 0 0 #e8e8e8, 0 0px 0 0 #e8e8e8, 0px 0px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}
::v-deep .ant-card-grid-hoverable:hover {
  -webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
} */
.echarts {
  background: #fff;
  width: 100%;
}
.echartsTitle {
  font-size: 16px;
  color: #000;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}
.echarts_1 {
  width: 100%;
  height: 300px;
  /* margin: 0 auto; */
}
.echarts_1_title {
  font-weight: 600;
  font-size: 18px;
  margin-left: 30px;
  color: black;
}
.echarts_2 {
  width: calc(65% - 40px);
  margin-right: 20px;
  height: 270px;
}
.echart2-right {
  width: 35%;
  height: 270px;
  padding-left: 40px;
  overflow-y: scroll;
}
.echart2-right::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /**/
}
.echart2-right::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
.echart2-right::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.ranking,
.rangTop {
  text-align: center;
  width: 20px;
  height: 20px;
  background: #f0f2f5;
  border-radius: 10px;
  color: #000;
}
.rankTop {
  background: #314659;
  color: #fff;
}
.status {
  font-size: 22px;
  color: #000;
  width: 50px;
}
.statusRed {
  color: #f00;
  font-size: 22px;
  /* width: 150px; */
}
.statusGreen {
  color: #00c43c;
  font-size: 22px;
  /* width: 150px; */
}
::v-deep .ant-card-body {
  padding: 0;
}
::v-deep .ant-card-bordered {
  border-top: none;
}
</style>
